import React, { useContext, useEffect, useState } from "react";
import Logo from "@/data/logo";
import NavLinksData from "@/data/navs";
import SocialData from "@/data/social";
import Link from "next/link";
import { useRouter } from "next/router";
import { MenuContext } from "@/context/menu-context";
import MobileMenu from "./mobile-menu";
import { Navbar, Nav, NavDropdown } from "react-bootstrap";
import styles from './css/header.module.css'

const Navs = (data, sub = false) => {
    const router = useRouter()
    return data.map((item) => {
        if (item.subs) {
            return (
                <li key={item.id} className="nav-item dropdown drop-nav">
                    <Link href="#">
                        <a className="nav-link">{item.title}</a>
                    </Link>
                    <ul className="dropdown-menu" aria-labelledby="navbarDropdown">
                        {Navs(item.subs, true)}
                    </ul>
                </li>
            )
        } else {
            if (item.url === '-') return sub ? <li key={item.id}><hr className="dropdown-divider" /></li> : ''
            return sub ? (
                <li key={item.id}><Link href={item.url}><a className="dropdown-item">{item.title}</a></Link></li>
            ) : (
                <li key={item.id} className={router.pathname == item.url ? "nav-item active" : "nav-item"}><Link href={item.url}><a className="nav-link">{item.title}</a></Link></li>
            )
        }
    })
}

function getBg (props, trans) {
    if (props.trans) {
        return trans ? "bg-transparent" : props.bg
    } else {
        return props.bg
    }
}

function getVariant (props, trans) {
    if (props.trans) {
        return trans ? props.trans : props.vart
    } else {
        return props.vart
    }
}

function Social (v, expand = "md") {
    const color = (v === 'dark') ? "tw-text-white hover:tw-bg-white  hover:tw-text-gray-900" : "tw-text-black hover:tw-bg-gray-900  hover:tw-text-white"
    return (
        <ul className={"list-unstyled flex-row m-0 d-none d-" + expand + "-flex"}>
            {
                SocialData.map((item, index) => {
                    return <li key={index} className={"mx-1 border tw-rounded-full tw-h-8 tw-w-8 tw-flex tw-items-center tw-justify-center " + color}><a href={item.url} target="_blank" title="Twitter" className="text-reset" rel="noreferrer" ><i className={item.icon}></i></a></li>
                })
            }
        </ul>
    )
}

function Comp (props) {
    const router = useRouter()
    const [scrollTop, setScrollTop] = useState(false);
    const [trans, setTrans] = useState(props.trans ? true : false);
    const { menuStatus, updateMenuStatus } = useContext(MenuContext);
    const handleScroll = () => {
        if (window.scrollY > 90) {
            setScrollTop(true);
            if (props.trans) {
                setTrans(false); //不透明
            }
        } else if (window.scrollY < 90) {
            setScrollTop(false);
            if (props.trans) {
                setTrans(true); //透明
            }
        }
    };
    const handleMenuClick = (e) => {
        e.preventDefault();
        updateMenuStatus(!menuStatus);
    };
    const handleGotoTop = () => {
        window.scrollTo(0, 0);
    };
    useEffect(() => {
        window.addEventListener("scroll", handleScroll);
        return () => {
            window.removeEventListener("scroll", handleScroll);
        };
    }, [trans]);
    let vart = getVariant(props, trans)
    let logo = Logo.light
    if (vart === "dark") {
        logo = Logo.dark
    }
    console.log(trans)
    return (
        <>
            {true === menuStatus ? <MobileMenu /> : null}
            <Navbar id="header" collapseOnSelect expand={props.expand} bg={getBg(props, trans)} variant={vart} className={'fixed-top ' + props.className} style={{ height: props.height + "px" }}>
                {props.back ?
                    <button onClick={() => router.back()} className={"btn border-0 shadow-none bg-transparent btn-" + props.vart + " d-" + props.expand + "-none"} type="button">
                        <i className="fa fa-arrow-left"></i>  返回
                    </button>
                    :
                    <button className={"btn border-0 shadow-none bg-transparent btn-" + props.vart + " d-" + props.expand + "-none"} onClick={handleMenuClick}>
                        <i className="fa fa-bars"></i>
                    </button>
                }
                <Navbar.Brand href={Logo.url} className={props.expand + ":tw-mx-auto"}>
                    <img src={logo} height={Logo.height} alt="Awesome Image" />
                </Navbar.Brand >

                <div className="navbar-collapse collapse">
                    <ul className={"navbar-nav " + props.nav}>
                        {Navs(NavLinksData)}
                    </ul>
                    {props.children}
                </div>
                {props.social ? Social(vart, props.expand) : ""}
            </Navbar>

            {/*fixed非透明头部补高 */}
            { trans ? "" : <div id="_vheader"></div>}

            {/*滚动到顶按钮 */}
            {scrollTop === true ? (
                <span
                    id="backToTop"
                    className={styles.scrollToTop}
                    onClick={() => handleGotoTop()}
                >
                    <i className="fa fa-angle-up"></i>
                </span>
            ) : null}
        </>
    )
}

Comp.defaultProps = {
    className: '',
    expand: "md",
    height: "65",
    bg: 'light',
    vart: 'light',
    nav: 'mx-auto',
    trans: false,
    social: true,
    back: false
}

export default Comp;
